<template>
  <div class="format-font">
    <Modal v-model="serviceActionModal" :closable="false" :footer-hide="true" :mask-closable="false" :title="action.title + 'Service'" width="650">
      <el-form ref="form" :model="newServiceForm" label-width="130px" :rules="ServiceFormRules">
        <el-form-item label="名称" prop="name" size="small">
          <el-input v-model="newServiceForm.name" placeholder="请输入集群名称" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description" size="small">
          <el-input v-model="newServiceForm.description" placeholder="请输入集群描述" style="width: 400px" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="serviceType" size="small" style="width: 400px">
          <el-select
            v-model="newServiceForm.serviceType"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in serviceTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境" prop="env" size="small">
          <el-select
            v-model="newServiceForm.env"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in envChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域" prop="zone" size="small">
          <el-select
            v-model="newServiceForm.zone"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in zoneChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
          </el-select>
        </el-form-item>
        <div v-if="newServiceForm.serviceType === 'ES'">
          <el-form-item label="所属部门" prop="departmentId" size="small">
            <el-select
              v-model="newServiceForm.departmentId"
              size="mini"
              style="width: 400px"
              placeholder="请选择"
              class="form-item-width"
              :popper-append-to-body="false"
              popper-class="options-content"
            >
              <el-option v-for="item in departmentsData" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Kibana地址" prop="kibanaUrl" size="small">
            <el-input v-model="newServiceForm.kibanaUrl" placeholder="请输入Kibana URL地址" style="width: 400px"></el-input>
          </el-form-item>
        </div>

        <div v-if="newServiceForm.serviceType === 'Redis'">
          <el-form-item label="内网负载IP" prop="lbIp" size="small">
            <el-input v-model="newServiceForm.lbIp" placeholder="请输入内网负载IP" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="内网负载域名" prop="lbDomain" size="small">
            <el-input v-model="newServiceForm.lbDomain" placeholder="请输入内网负载域名" style="width: 400px"></el-input>
          </el-form-item>
        </div>
        <div v-if="newServiceForm.serviceType === 'DFS'">
          <el-form-item label="服务端口" prop="ports" size="small">
            <el-select v-model="newServiceForm.ports" size="small" multiple placeholder="请选择端口..." style="width: 400px">
              <el-option v-for="t in portsList" :key="t" :label="t" :value="t"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button size="small" type="primary" @click="ok('form')">{{ action.title }}Service信息</el-button>
          <el-button size="small" @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </Modal>
  </div>
</template>

<script>
import { snakeCaseObject } from '@/libs/object'
import { createCmdbService, updateCmdbService } from '@/api/cmdb/service'
import { getDepartments } from '@/api/user'
import { errorNotify } from '@/libs/util'
import { serviceTypeChoice, envChoice, zoneChoice } from '@/views/cmdb/config'
import Bus from '@/store/bus.js'

export default {
  name: 'ServiceAction',
  props: {
    serviceActionModal: {
      type: Boolean,
      default: false,
      require: true
    },
    serviceInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: Object,
      default() {
        return {
          source: 'basic',
          title: '修改',
          type: 'update'
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      ServiceForm: {},
      newServiceForm: {},
      portsList: ['60001', '60002', '60003'],
      ServiceFormRules: {
        name: [{ trigger: 'blur', required: true, message: '服务名称不能为空' }],
        description: [{ trigger: 'blur', required: true, message: '服务描述不能为空' }],
        serviceType: [{ trigger: 'blur', required: true, message: '服务类型不能为空' }],
        env: [{ trigger: 'blur', required: true, message: '服务所处环境不能为空' }],
        zone: [{ trigger: 'blur', required: true, message: '服务所处区域不能为空' }]
      },
      serviceTypeChoice: [],
      envChoice: [],
      zoneChoice: [],
      departmentsData: []
    }
  },
  mounted() {
    this.setInitModelInfo()
    this.zoneChoice = zoneChoice(this)
    this.envChoice = envChoice(this)
    this.serviceTypeChoice = serviceTypeChoice(this)
    this.getDepartments()
  },
  methods: {
    cancel() {
      this.$emit('on-service-change', { type: 'cancel', status: false })
    },
    ok(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.newServiceForm.ports && this.newServiceForm.ports !== '') {
            const tmp_ports = this.newServiceForm.ports.join(',')
            this.newServiceForm.ports = tmp_ports
          }
          await this.actionServiceInfo()
        } else {
          return false
        }
      })
    },
    async actionServiceInfo() {
      const params = this.newServiceForm
      try {
        if (this.action.type === 'update') {
          const { data } = await updateCmdbService(this.newServiceForm.id, snakeCaseObject(params))
          this.$emit('on-service-change', { type: this.action.type, status: false, serviceId: data.id })
          if (this.action.source === 'basic') {
            Bus.$emit('getServiceInfoRefresh', { type: this.action.type, status: false, serviceId: data.id })
          }
        } else if (this.action.type === 'create') {
          const { data } = await createCmdbService(snakeCaseObject(this.newServiceForm))
          this.$emit('on-service-change', { type: this.action.type, status: false, serviceId: data.id })
        } else {
          return false
        }
      } catch (e) {
        errorNotify(e)
      }
    },
    async getDepartments() {
      try {
        const { data } = await getDepartments()

        this.departmentsData = data
      } catch (e) {
        errorNotify(e)
      }
    },
    setInitModelInfo() {
      this.newServiceForm = this.$lodash.cloneDeep(this.serviceInfo)
    }
  }
}
</script>

<style scoped>
</style>
